import { LeftOutlined } from '@ant-design/icons';
import type { CSSProperties, ReactNode } from 'react';
import { useNavigate } from 'react-router-dom';
import styles from './index.module.less';

interface PageHeaderProps {
  title?: string; // 标题名称
  hasBack?: boolean; // 是否展示返回图标
  children?: ReactNode;
  className?: string; // children元素样式
  customNode?: ReactNode; // 自定义节点内容
  style?: CSSProperties;
}

export default ({ title, hasBack, children, className, customNode, style }: PageHeaderProps) => {
  const navigate = useNavigate();

  return (
    <>
      {customNode ? (
        <div className={styles.header}>{customNode}</div>
      ) : (
        <>
          {(hasBack || title) && (
            <div className={styles.header} onClick={() => hasBack && navigate(-1)}>
              {hasBack && <LeftOutlined style={{ marginRight: '10px', cursor: 'pointer' }} />}
              {title}
            </div>
          )}
        </>
      )}
      <div className={`${styles.children} ${className}`} style={style}>
        {children}
      </div>
    </>
  );
};
